#header {
    background: rgba(255, 255, 255, 0.9); /* Color of main header */
    position: fixed;
    top: 40px; /* Adjust based on the height of mini header */
    left: 0;
    width: 100%;
    z-index: 999;
    opacity: 0; /* Initially hidden */
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease; /* Smooth transition */
}

#header.show {
    opacity: 1; /* Make visible */
    visibility: visible;
}

.hidden {
    top: -100px; /* Move the header out of view */
    opacity: 0;
}

header {
    color: black;
    text-align: center;
    padding: 20px;
    position: sticky;
    display: flex;
    justify-content: space-between;
    align-items: center;
    top: 0;
    width: 100%;
    z-index: 1000;
    transition: background-color 0.3s;
}

nav {
    display: flex;
    align-items: center;
    color: black;
}

nav a {
    text-decoration: none; /* Remove underlines from links */
    padding: 10px 15px; /* Add padding for clickable area */
    color: black; /* Color for nav items */
    position: relative; /* Required for the dropdown */
}

nav a:hover {
    text-decoration: underline; /* Underline on hover */
}

/* Dropdown Styles */
nav .class-dropdown,
nav .testimonial-dropdown {
    position: relative; /* Position relative for dropdown */
    color: black;
}

nav .dropdown {
    display: none; /* Hide dropdown by default */
    position: absolute; /* Position dropdown relative to parent */
    background: transparent; /* Remove background */
    z-index: 1; /* Ensure dropdown appears above other elements */
    left: 0; /* Align dropdown to left */
}

nav .class-dropdown:hover .dropdown,
nav .testimonial-dropdown:hover .dropdown {
    display: block; /* Show dropdown on hover */
}

nav .dropdown a {
    display: block; /* Stack links vertically */
    padding: 10px 15px; /* Add padding */
    color: black !important;
}

/* Optional: Add hover effect for dropdown items */
nav .dropdown a:hover {
    text-decoration: underline; /* Underline on hover */
    color: #3CB371;
    transition: color 0.3s; /* Smooth transition */
}

/* Login Button Styles */
.login-button {
    padding: 10px 15px;
    color: #333; /* Same color as other links */
    text-decoration: none; /* No underline */
    margin-right: 20px;
}

.login-button:hover {
    text-decoration: underline; /* Underline on hover */
}

/* Mini Header */
.mini-nav {
    background-color: #333; /* Color of mini header */
    color: white;
    padding: 5px 0;
    text-align: center;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    opacity: 0; /* Initially hidden */
    visibility: hidden; /* Use visibility for smoother transitions */
    transition: opacity 0.5s ease, visibility 0.5s ease; /* Smooth transition */
    height: 30px;
}

.mini-nav.show {
    opacity: 1; /* Make visible */
    visibility: visible;
}

.mini-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between; /* Space items left, center, and right */
    align-items: center;
    width: 100%;
}

/* Basic styling for links */
.mini-nav ul li a, .mini-nav ul li span {
    color: white;
    text-decoration: none;
    padding: 10px;
    font-size: 14px;
}

/* Optional hover effect */
.mini-nav ul li a:hover {
    text-decoration: underline;
}

/* Center the 'Give Us A Shout!' item */
.center-item {
    margin: 0 auto;
    text-align: center;
}

/* Align Queries, Login, and Sign Up to the right */
.right-item {
    margin-left: 20px; /* This pushes the right items to the far right */
}

h1 {
    margin: 0;
    font-size: 24px; /* Adjust size as needed */
    color: #333; /* Darker text color for contrast */
}